<template>
  <el-container :class="hide == true ? 'hideSidebar' : ''" class="home-wrapper">
    <el-header class="d-flex space-between" style="display: none;">
      <div class="nav-box flex-1 ml-2">
        <el-menu
          ref="headerMenu"
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="headerSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1">所有订单</el-menu-item>
          <el-menu-item index="/order/wait">待完成</el-menu-item>
          <el-menu-item index="/order/done">已完成</el-menu-item>
        </el-menu>
      </div>
    </el-header>
    <el-aside>
      <el-menu router :default-active="$route.path" :collapse-transition="false" :collapse="isCollapse" @select="selectMenu">
        <el-menu-item class="hd"><i class="el-icon-setting fs16"></i><span class="bold">商家后台</span></el-menu-item>

        <el-submenu index="1">
          <template slot="title"><i class="el-icon-s-goods"></i><span>商品管理</span> </template>
          <el-menu-item index="/product/edit"><span>新建商品</span></el-menu-item>
          <el-menu-item index="/product/list"><span>商品列表</span></el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-s-order"></i><span>订单管理</span> </template>
          <el-menu-item index="/orders/waitAccept"><span>待受理</span></el-menu-item>
          <el-menu-item index="/orders/waitFinish"><span>待完成</span></el-menu-item>
          <el-menu-item index="/orders/finish"><span>已完成</span></el-menu-item>
          <el-menu-item index="/orders/cancel"><span>已取消</span></el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"> <i class="el-icon-message"></i><span>系统设置</span> </template>
          <el-menu-item index="/profile"><span>账号信息</span></el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <Header :breadList="breadList" />

      <router-view :key="$route.path"></router-view>
    </el-main>
  </el-container>
</template>

<script>
import Header from "@/components/Header";

export default {
  components: {
    Header,
  },
  data() {
    return {
      activeIndex: "1",
      hide: false,
      isCollapse: false,
      breadList: this.$store.state.breadList,
    };
  },
  methods: {
    headerSelect() {},
    selectMenu() {
      let self = this;
      setTimeout(function() {
        self.breadList = self.$store.state.breadList;
      }, 0);
    },
  },
};
</script>

<style lang="scss">
.home-wrapper.hideSidebar {
  .el-aside {
    width: 64px !important;
  }
  .el-main {
    margin-left: 64px;
    .el-header {
      left: 64px;
    }
  }
}

.home-wrapper {
  .el-aside {
    .el-menu {
      .hd,
      .hd:hover,
      .hd:focus {
        background-color: #545c64;
        color: #fff !important;
        font-size: 20px;
        i {
          color: #fff;
          font-size: 20px;
        }
      }
    }
  }
}
.hamburger {
  padding-right: 15px;
  i {
    font-size: 24px;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
